<template>
    <!-- 使用el-upload组件实现头像上传功能 -->
    <el-upload
      class="avatar-uploader"
      :action="UploadUrl"
      :headers="{
        Authorization,
      }"
      name="multipartFile"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      accept=".png, .jpg"
    >
      <!-- 如果有预览URL，则显示图片 -->
      <el-image
        v-if="preview_url"
        :src="preview_url"
        class="avatar"
        :class="{ avatar2: mini }"
      >
      </el-image>
      <!-- 否则显示上传图标 -->
      <el-icon
        v-else
        class="avatar-uploader-icon"
        :class="{ 'avatar-uploader-icon2': mini }"
      >
        <Plus />
      </el-icon>
    </el-upload>
  </template>
  
  <script  setup>
  import { ref, computed } from "vue";
  import { Plus } from "@element-plus/icons-vue";
  import { ElMessage } from "element-plus";
  // 从本地存储获取授权Token
  const Authorization = localStorage.getItem("token")
    ? localStorage.getItem("token")
    : "";
  
  // 上传接口的URL
  const UploadUrl = "/api/uploadFile";
  
  // 定义props，用于接收父组件传递的值
  const props = defineProps({
    modelValue: String,
    size: Number,
    mini: Boolean,
  });
  
  // 定义emits，用于触发更新事件
  const emit = defineEmits(["update:modelValue"]);
  // 图片URL的响应式引用
  const imageUrl = ref("");
  // 计算属性，用于生成预览URL
  
  const preview_url = computed(() => {
    let url = null;
    if (imageUrl.value && imageUrl.value.indexOf("/res") == 0) {
      url = imageUrl.value;
    }
    if (props.modelValue && props.modelValue.indexOf("/res") == 0) {
      url = import.meta.env.VITE_APP_HOST + props.modelValue;
    }
    return url;
  });
  // 上传成功后的处理函数
  const handleAvatarSuccess = (response, uploadFile) => {
    let res = response;
    if (!res.success) {
      ElMessage.error(res.message);
    } else {
      emit("update:modelValue", res.entity.fileUrl);
    }
  };
  // 上传前的校验函数
  const beforeAvatarUpload = (rawFile) => {
    const type_arr = ["image/jpeg", "image/png"];
    if (!type_arr.includes(rawFile.type)) {
      ElMessage.error("文件格式不正确!");
      return false;
    }
    const size = props.size ?? 5;
    if (rawFile.size / 1024 / 1024 > size) {
      ElMessage.error("上传大小不得超过 " + size + "M");
      return false;
    }
    return true;
  };
  </script>
  
  <style lang="scss" scoped>
  /* 设置上传区域的样式 */
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  /* 迷你模式下的头像样式 */
  .avatar-uploader .avatar2 {
    width: 120px;
    height: 120px;
    display: block;
  }
  
  /* 设置上传区域的样式，包括边框、圆角、光标、位置、溢出隐藏和过渡效果 */
  .avatar-uploader :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  /* 鼠标悬停时的样式，改变边框颜色 */
  .avatar-uploader :deep(.el-upload:hover) {
    border-color: var(--el-color-primary);
  }
  
  /* 设置上传图标的样式 */
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  
  /* 迷你模式下的上传图标样式 */
  .el-icon.avatar-uploader-icon2 {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
  }
  </style>